<template>
   <div class="box">
       <header class="head">
             <router-link tag="span" to="/Index" class="iconfont icon-zyojiantou"></router-link>
            <p>我的</p>
       </header>
       <section class="ming">
           <div class="left">
               <span class="iconfont icon-touxiang"></span>
           </div>
           <div class="cent">
               <h2>登录/注册</h2>
               <p><span class="iconfont icon-shouji"></span>登录后享受更多特权</p>
           </div>
           <div class="right">
             <span class="iconfont icon-youjian"></span>
           </div>
       </section>
       <figcaption class="jinbi">
          <dl>
            <dt class="iconfont icon-dingdan"></dt>
            <dd>红包</dd>    
          </dl>
          <dl>
            <dt class="iconfont icon-jinbi" id="_dt"></dt>
            <dd>金币</dd>    
          </dl>
       </figcaption> 
       <section class="heyi">
           <div class="neihe">
               <h1><span class="iconfont icon-weibiaoti104"></span>&nbsp;我的地址</h1>
               <p class="iconfont icon-youjian"></p>
           </div>
        </section>
        <section class="heer">
           <div class="nehe">
               <h1><span class="iconfont icon-bao"></span>&nbsp;金币商城</h1>
               <p class="iconfont icon-youjian"></p>
           </div>
           <div class="nehe">
               <h1><span class="iconfont icon-liwu" id="jin"></span>&nbsp;享受拿5元现金</h1>
               <p class="iconfont icon-youjian"></p>
           </div>
        </section>
        <section class="hesan">
           <div class="nesn">
               <h1><span class="iconfont icon-erji"></span>&nbsp;我的客服</h1>
               <p class="iconfont icon-youjian"></p>
           </div>
           <div class="nesn">
               <h1><span class="iconfont icon-eliaomo1"></span>&nbsp;下载饿了么APP</h1>
               <p class="iconfont icon-youjian"></p>
           </div>
        </section>      
   </div>
</template>
<script>
</script>
<style scoped lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
.box {
  font-family: "楷体";
  background: #eee;
  width: 100%;
  height: 100vh;
  .head {
    width: 100%;
    .px2rem(height,100);
    background: #2199e4;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    span {
      width: 13%;
      .px2rem(height,100);
      display: flex;
      justify-content: center;
      align-items: center;
      .px2rem(font-size,42);
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
    }
    p {
      width: 100%;
      .px2rem(height,100);
      .px2rem(font-size,36);
      color: #fff;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .ming {
    width: 100%;
    .px2rem(height,230);
    display: flex;
    background: #2199e4;
    .px2rem(padding-top,110);
    .left {
      width: 28%;
      .px2rem(height,180);
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        .px2rem(font-size,150);
        color: #fff;
      }
    }
    .cent {
      width: 65%;
      .px2rem(height,230);
      display: flex;
      flex-direction: column;
      h2 {
        .px2rem(font-size,45);
        font-weight: bold;
        color: #fff;
        .px2rem(padding-top,70);
      }
      p {
        .px2rem(font-size,32);
        color: #fff;
        line-height: 1.5;
        span {
          .px2rem(font-size,40);
        }
      }
    }
    .right {
      width: 7%;
      .px2rem(height,230);
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        .px2rem(font-size,38);
        color: #fff;
      }
    }
  }
  .jinbi {
    display: flex;
    background: #fff;
    dl {
      flex: 1;
      .px2rem(height,160);
      text-align: center;
      dt {
        .px2rem(font-size,60);
        color: #ff0000;
        .px2rem(padding-top,30);
        text-align: center;
      }
      dd {
        .px2rem(font-size,38);
        font-weight: bold;
        line-height: 1.8;
        color: Black;
      }
    }
    #_dt {
      color: #006600;
    }
  }
  .heyi {
    width: 100%;
    .px2rem(height,120);
    display: flex;
    justify-content: center;
    .px2rem(margin-top,20);
    background: #fff;
    .neihe {
      width: 92%;
      .px2rem(height,100);
      display: flex;
      justify-content: space-between;
      align-items: center;
      h1 {
        .px2rem(font-size,36);
        font-weight: bold;
        color: Black;
        span {
          .px2rem(font-size,42);
          color: #2199e4;
        }
      }
      p {
        .px2rem(font-size,38);
        color: #ccc;
      }
    }
  }
  .heer {
    width: 100%;
    .px2rem(height,200);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .px2rem(margin-top,20);
    background: #fff;
    .nehe {
      width: 92%;
      .px2rem(height,100);
      display: flex;
      justify-content: space-between;
      align-items: center;
      h1 {
        .px2rem(font-size,36);
        font-weight: bold;
        color: Black;
        span {
          .px2rem(font-size,42);
          color: #339900;
        }
      }
      p {
        .px2rem(font-size,38);
        color: #ccc;
      }
      #jin {
        color: #ff6600;
      }
    }
  }
  .hesan {
    width: 100%;
    .px2rem(height,200);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .px2rem(margin-top,20);
    background: #fff;
    .nesn {
      width: 92%;
      .px2rem(height,100);
      display: flex;
      justify-content: space-between;
      align-items: center;
      h1 {
        .px2rem(font-size,36);
        font-weight: bold;
        color: Black;
        span {
          .px2rem(font-size,42);
          color: #2199e4;
        }
      }
      p {
        .px2rem(font-size,38);
        color: #ccc;
      }
    }
  }
}
</style>
